<template>
  <div id="table">
    <p><span>名称</span><span>是否解决</span><span>优先级</span><span>创建者</span><span>创建时间</span><span>处理人</span><span>最近处理时间</span></p>
    <p class="content" v-for="bug in bugs">
      <span><a href="">{{bug.bugName}}</a></span>
      <span :style="{color:bug.bugState? '#67C23A':'#F56C6C'}">{{ bug.bugState?'已解决':'待解决' }}</span>
      <span :style="{color: color(bug.bugState,bug.bugGrade-1)}">{{ gradeToWord[bug.bugGrade-1] }}</span>
      <span>{{ bug.createUserName }}</span>
      <span>{{ bug.bugCreateTime }}</span>
      <span>{{ bug.dealUserName }}</span>
      <span>{{ bug.bugRecentTime }}</span>
    </p>
  </div>
</template>

<script>
import {gradeToWord,gradeToColor} from "./data/global";
export default {
  name: "BugList",
  props:['bugs'],
  data(){
    return {
      gradeToWord,gradeToColor,
    }
  },
  methods:{
    color(state,grade){
      return state?'#909399':this.gradeToColor[grade]
    }
  }
}
</script>

<style scoped>
#table p{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:black;
  height:50px;
  line-height: 50px;

  border-bottom: 1px solid #e9e9eb;
}
#table{
  width:100%;
}
#table p:nth-child(1){
  background-color:#d9ecff;
  color:#409EFF;
}
#table p span{
  display: inline-block;
  text-align: left;
  font-size:14px;
}
#table p span:nth-child(1){
  width:15%;
}
#table p span:nth-child(2){
  width:8%;
}
#table p span:nth-child(3){
  width:7%;
}
#table p span:nth-child(4){
  width:10%;
}
#table p span:nth-child(5){
  width:20%;
}
#table p span:nth-child(6){
  width:10%;
}
#table p span:nth-child(7){
  width:18%;
}

#table .content:hover{
  background-color:#e9e9eb;
}
</style>
